1
00:00:03,980 --> 00:00:06,160
Most designers' portfolios are online.

2
00:00:07,008 --> 00:00:12,220
This requires some heavy lifting to organize your assets and present them maintaining clarity

3
00:00:12,440 --> 00:00:13,600
and the correct color.

4
00:00:14,360 --> 00:00:16,080
Here I'll share how to create,

5
00:00:16,320 --> 00:00:19,060
organize, and present the work on a website.

6
00:00:20,480 --> 00:00:23,800
I created my first portfolio in my senior year at college.

7
00:00:24,500 --> 00:00:26,620
I knew this was pretty important to find a job.

8
00:00:27,456 --> 00:00:29,220
Now, this was long before the internet,

9
00:00:29,380 --> 00:00:31,020
so everything was physical.

10
00:00:32,260 --> 00:00:34,260
That meant dragging the original comp,

11
00:00:34,560 --> 00:00:37,760
poster, booklet, or whatever around town

12
00:00:38,280 --> 00:00:41,280
in a big, black, and unwieldy portfolio case.

13
00:00:43,584 --> 00:00:50,520
Fortunately, I spent the previous summer working with a photographer on a project that was shot on 4x5 transparencies.

14
00:00:51,200 --> 00:00:51,300
So,

15
00:00:52,280 --> 00:00:53,760
I decided to do the same.

16
00:00:54,400 --> 00:00:58,200
Shoot all the work and mount the transparencies onto boards.

17
00:00:58,480 --> 00:00:58,580
The

18
00:01:00,128 --> 00:01:03,600
upside was my introduction into documenting one's work.

19
00:01:03,808 --> 00:01:08,900
The downside was people trying to see a tiny poster on a tiny image.

20
00:01:11,520 --> 00:01:14,240
There's a saying, history is written by the victor.

21
00:01:15,456 --> 00:01:17,240
Something similar happens in the arts.

22
00:01:17,420 --> 00:01:19,340
If the work isn't documented,

23
00:01:19,640 --> 00:01:22,160
it goes away and is lost in history.

24
00:01:23,744 --> 00:01:26,800
Documenting and archiving work is usually ignored,

25
00:01:26,940 --> 00:01:28,620
and we start the next project.

26
00:01:28,980 --> 00:01:29,080
The

27
00:01:29,760 --> 00:01:33,080
process to document the work gets bigger and bigger,

28
00:01:33,260 --> 00:01:35,100
and finally seems impossible.

29
00:01:35,300 --> 00:01:35,680
So,

30
00:01:36,180 --> 00:01:37,980
designers just don't do it.

31
00:01:39,160 --> 00:01:43,720
When they need the image for their online portfolio or to send to a publisher,

32
00:01:43,940 --> 00:01:45,840
it's a last-minute scramble.

33
00:01:47,180 --> 00:01:47,880
Here's my process.

34
00:01:48,080 --> 00:01:50,460
It's worked for me for my entire career.

35
00:01:52,440 --> 00:01:54,240
First, the image asset archive.

36
00:01:56,320 --> 00:01:58,500
Let's start with the structure of an archive.

37
00:01:58,800 --> 00:01:58,944
Kind

38
00:01:59,500 --> 00:02:03,900
of always like knowing where you'll put something fragile down before picking it up.

39
00:02:04,140 --> 00:02:04,240
I've

40
00:02:05,024 --> 00:02:09,140
had one for a couple of decades dedicated to the documentation of my work.

41
00:02:09,462 --> 00:02:09,952
So,

42
00:02:11,840 --> 00:02:14,580
I don't have a lot of time to go through this stuff. I'm going to start with the main project. I have a folder with folders for each client.

43
00:02:14,780 --> 00:02:19,780
This could be your class name if you're a student or project name if you work in-house.

44
00:02:20,060 --> 00:02:20,288
I

45
00:02:21,980 --> 00:02:25,240
don't name the files with dates or names like Final, Final.

46
00:02:25,540 --> 00:02:25,728
After

47
00:02:26,300 --> 00:02:29,280
a few months, I can't remember what is in July 2023.

48
00:02:29,960 --> 00:02:30,080
Each

49
00:02:33,120 --> 00:02:36,300
folder has folders for each project.

50
00:02:36,680 --> 00:02:42,780
If needed, The specific items each also have their own folder.

51
00:02:44,530 --> 00:02:50,180
In this, we hold one folder for 300 DPI images,

52
00:02:50,500 --> 00:02:53,560
another for 72 DPI images,

53
00:02:53,820 --> 00:02:57,360
and one more for the PDF of the project.

54
00:02:59,040 --> 00:03:03,360
I keep my names simple and easy to understand.

55
00:03:04,740 --> 00:03:07,520
Stuff will be confusing a year later.

56
00:03:09,160 --> 00:03:09,260
The

57
00:03:10,240 --> 00:03:13,140
archive is stored on an external hard drive,

58
00:03:13,340 --> 00:03:19,740
a backup drive, and Google Drive or any cloud-based service that will store it safely.

59
00:03:20,100 --> 00:03:20,320
Here

60
00:03:22,400 --> 00:03:23,820
is my actual archive.

61
00:03:24,120 --> 00:03:26,400
Hopefully this will make it a bit clearer.

62
00:03:26,660 --> 00:03:28,080
Folders by client,

63
00:03:30,220 --> 00:03:31,980
projects in each client folder,

64
00:03:34,340 --> 00:03:40,128
72 DPI, 300 DPI, and a PDF folder for each project, the

65
00:03:41,980 --> 00:03:45,184
high-resolution PDF that I can reopen later, and

66
00:03:46,880 --> 00:03:52,928
for a publication, I might have a cover and several spreads in 300 DPI and the

67
00:03:53,632 --> 00:03:56,120
same images in 72 DPI.

68
00:03:56,660 --> 00:03:56,760
It's

69
00:03:58,060 --> 00:04:02,640
backed up on the external hard drive and on Google Drive as a safety measure.

70
00:04:03,000 --> 00:04:03,168
Now

71
00:04:05,504 --> 00:04:07,340
let's talk about documenting the work.

72
00:04:07,960 --> 00:04:11,060
Now that PDF you mentioned,

73
00:04:11,260 --> 00:04:11,940
what is that?

74
00:04:12,200 --> 00:04:14,500
Now when I finish any project,

75
00:04:14,700 --> 00:04:16,440
no matter how large or small,

76
00:04:16,640 --> 00:04:20,260
I save the file as a high-resolution PDF.

77
00:04:20,680 --> 00:04:20,960
This

78
00:04:21,856 --> 00:04:26,432
solves the problem of opening a file a couple of years later to find missing

79
00:04:26,660 --> 00:04:27,920
images or fonts.

80
00:04:28,140 --> 00:04:33,920
The PDF is a stable format that I can then open in Photoshop or print.

81
00:04:34,180 --> 00:04:34,528
Do

82
00:04:36,180 --> 00:04:38,360
this at the end of every project.

83
00:04:38,720 --> 00:04:41,620
It's a five-minute process that is invaluable.

84
00:04:42,320 --> 00:04:42,560
Now

85
00:04:43,380 --> 00:04:45,000
that I've saved the file as a PDF,

86
00:04:45,360 --> 00:04:47,700
I can open it in any resolution I need to.

87
00:04:47,900 --> 00:04:49,740
So first, I'll open Photoshop.

88
00:04:50,040 --> 00:04:50,368
I

89
00:04:51,440 --> 00:04:53,568
will find that file, open

90
00:04:54,656 --> 00:04:55,328
it, and

91
00:04:55,860 --> 00:04:56,400
there it is.

92
00:04:56,660 --> 00:04:56,896
I

93
00:04:57,960 --> 00:05:00,280
can choose whatever size I want here.

94
00:05:00,480 --> 00:05:02,220
So I want a 300 DPI version.

95
00:05:02,460 --> 00:05:05,680
I'm going to make this 8 inches wide and about 10 inches tall.

96
00:05:06,000 --> 00:05:08,340
That's about the size any publication would be.

97
00:05:08,720 --> 00:05:08,864
I

98
00:05:10,260 --> 00:05:14,240
can flatten the image because I don't need anything more than that.

99
00:05:14,360 --> 00:05:15,880
Now I'm ready to go.

100
00:05:16,020 --> 00:05:18,688
I can save as, and

101
00:05:23,080 --> 00:05:24,384
I'm going to call this 300.

102
00:05:26,660 --> 00:05:26,760
Now

103
00:05:31,260 --> 00:05:33,040
that I've made the 300 DPI version,

104
00:05:33,220 --> 00:05:38,016
I'll make a 72 DPI version because I know I want to put it in a web

105
00:05:38,528 --> 00:05:39,620
or a screen-based environment.

106
00:05:40,000 --> 00:05:41,400
So I open Photoshop,

107
00:05:41,520 --> 00:05:43,360
and again, it's the same process.

108
00:05:43,640 --> 00:05:46,304
I'm going to open the PDF

109
00:05:46,912 --> 00:05:47,300
file.

110
00:05:47,580 --> 00:05:48,000
This

111
00:05:48,900 --> 00:05:54,740
time I'm going to save it as 8 inches by 10 inches at 72 DPI.

112
00:05:55,040 --> 00:05:56,640
And I go through the same process.

113
00:05:56,660 --> 00:05:58,960
I'm going to go through the same process of flattening the image.

114
00:05:59,200 --> 00:05:59,680
Save

115
00:06:01,728 --> 00:06:01,900
as.

116
00:06:02,180 --> 00:06:02,688
I'm

117
00:06:04,300 --> 00:06:05,632
going to call this one 72.

118
00:06:06,500 --> 00:06:06,912
And

119
00:06:13,620 --> 00:06:18,780
now I have a 300 DPI version and a 72 DPI version and the original PDF.

120
00:06:19,100 --> 00:06:20,480
And they're ready to be archived.

121
00:06:20,740 --> 00:06:21,056
If

122
00:06:21,920 --> 00:06:23,580
I'm working on a book or a publication,

123
00:06:23,860 --> 00:06:26,020
once I wrap up the project and it's final,

124
00:06:26,660 --> 00:06:28,980
I of course have saved it as a high-res PDF.

125
00:06:29,312 --> 00:06:31,640
Now I can open it in Photoshop.

126
00:06:32,080 --> 00:06:32,448
Here's

127
00:06:35,600 --> 00:06:39,460
an example of a PDF for a recent book that I wrote.

128
00:06:39,600 --> 00:06:41,060
I'm going to open it,

129
00:06:41,160 --> 00:06:45,380
and you can see that we get multiple pages here that open up as a possibility.

130
00:06:46,260 --> 00:06:46,688
So

131
00:06:47,264 --> 00:06:49,160
I'm going to select this spread.

132
00:06:49,460 --> 00:06:49,920
Now

133
00:06:51,264 --> 00:06:52,500
it's not 8 inches wide.

134
00:06:52,640 --> 00:06:54,660
It's 16 because there's two pages.

135
00:06:54,860 --> 00:06:55,580
It's a spread.

136
00:06:56,660 --> 00:06:57,020
16.

137
00:06:57,240 --> 00:06:57,824
Open.

138
00:06:58,976 --> 00:06:59,392
Now

139
00:07:00,260 --> 00:07:01,640
I have that spread.

140
00:07:01,940 --> 00:07:04,192
I'm going to flatten again

141
00:07:04,864 --> 00:07:05,504
the image.

142
00:07:05,940 --> 00:07:06,432
And

143
00:07:08,740 --> 00:07:10,100
I'm going to save it.

144
00:07:10,380 --> 00:07:10,816
And

145
00:07:11,640 --> 00:07:14,020
here I'll mark what page it is.

146
00:07:14,160 --> 00:07:14,688
Page

147
00:07:15,460 --> 00:07:15,820
9.

148
00:07:16,020 --> 00:07:18,304
And this is 300

149
00:07:19,360 --> 00:07:20,240
DPI.

150
00:07:20,600 --> 00:07:22,940
So I'm going to save this to my computer.

151
00:07:26,660 --> 00:07:26,760
And

152
00:07:29,320 --> 00:07:29,760
it's done.

153
00:07:29,940 --> 00:07:36,840
Now of course I can repeat the same process exactly if I want to open up other pages and save them as well.

154
00:07:37,020 --> 00:07:44,200
And it's always a good idea to have about 7 or 8 that you can document of different kinds of pages on a book.

155
00:07:44,680 --> 00:07:44,928
So

156
00:07:45,664 --> 00:07:47,240
once again, we're going to open it.

157
00:07:47,400 --> 00:07:50,240
And I've got a chapter opening spread that I've documented.

158
00:07:50,660 --> 00:07:51,104
So

159
00:07:53,960 --> 00:07:56,860
I might want to show something that is a little bit more diverse.

160
00:07:57,380 --> 00:07:58,016
For

161
00:07:58,784 --> 00:08:01,600
example, this page has multiples

162
00:08:02,656 --> 00:08:03,552
of objects.

163
00:08:04,640 --> 00:08:05,152
I'm

164
00:08:06,360 --> 00:08:07,000
going to open this.

165
00:08:07,180 --> 00:08:07,744
And

166
00:08:09,460 --> 00:08:10,880
follow the exact same process.

167
00:08:11,460 --> 00:08:11,808
Flatten

168
00:08:13,180 --> 00:08:13,460
image.

169
00:08:13,800 --> 00:08:14,336
Save

170
00:08:17,380 --> 00:08:17,700
as.

171
00:08:17,980 --> 00:08:18,560
This

172
00:08:21,860 --> 00:08:23,060
is page 29.

173
00:08:26,660 --> 00:08:27,872
And it's 300

174
00:08:30,208 --> 00:08:30,640
DPI.

175
00:08:31,000 --> 00:08:31,584
Save

176
00:08:33,260 --> 00:08:33,940
it to my computer.

177
00:08:34,540 --> 00:08:34,784
Now

178
00:08:41,720 --> 00:08:43,480
that I have the 300 DPI version,

179
00:08:43,740 --> 00:08:47,240
I can use that to save a file that is 72 DPI,

180
00:08:47,400 --> 00:08:48,660
better suited for the web.

181
00:08:48,880 --> 00:08:51,616
So again, I will save

182
00:08:52,672 --> 00:08:54,220
this time as

183
00:08:56,660 --> 00:08:56,760
a

184
00:08:57,460 --> 00:08:57,560
JPEG.

185
00:08:57,600 --> 00:08:58,240
And

186
00:08:58,800 --> 00:09:00,940
the width on a website,

187
00:09:01,180 --> 00:09:05,140
probably I don't need it to be any wider than 2500 pixels.

188
00:09:05,680 --> 00:09:06,144
And

189
00:09:09,728 --> 00:09:10,084
export it.

190
00:09:10,800 --> 00:09:11,168
And

191
00:09:13,980 --> 00:09:16,640
this one I'm going to name

192
00:09:17,248 --> 00:09:18,280
72 DPI.

193
00:09:18,540 --> 00:09:19,136
And

194
00:09:23,400 --> 00:09:25,120
I'll repeat the process as needed.

195
00:09:25,300 --> 00:09:26,016
And

196
00:09:26,660 --> 00:09:28,096
now I have 300

197
00:09:28,660 --> 00:09:33,140
DPI versions and 72 DPI versions of multiple spreads of the book.

198
00:09:33,340 --> 00:09:38,520
And I'll talk about how to combine these to make them a little better looking as actual books later.

199
00:09:39,040 --> 00:09:46,976
I save motion projects at the highest resolution possible because I'm sure that whatever the standard is today will be higher in five years.

200
00:09:47,540 --> 00:09:48,128
Okay,

201
00:09:49,140 --> 00:09:51,780
you may ask, what about three-dimensional objects?

202
00:09:52,200 --> 00:09:56,544
For some, I set up a very simple cove with a sheet of

203
00:09:56,720 --> 00:09:57,640
white or colored paper.

204
00:09:58,080 --> 00:09:58,592
Indirect

205
00:09:59,200 --> 00:10:02,860
sunlight casts a nice even tone that has the best even color.

206
00:10:03,340 --> 00:10:03,776
Again,

207
00:10:06,048 --> 00:10:08,140
shoot at the highest resolution possible.

208
00:10:08,440 --> 00:10:14,420
And use the process to save the images as 300 DPI and 72 DPI.

209
00:10:14,880 --> 00:10:15,456
One

210
00:10:17,360 --> 00:10:22,900
of my pet peeves documenting printed work is that I could never achieve sharp typography.

211
00:10:23,360 --> 00:10:23,904
Mockup

212
00:10:25,820 --> 00:10:30,380
software and imagery are fantastic at creating clear dimensional images of work.

213
00:10:30,640 --> 00:10:36,340
But stay away from anything too tricky or complicated that seems to be the most popular.

214
00:10:37,200 --> 00:10:41,400
At one point, I found that every student presentation had the same bus shelter mockup.

215
00:10:41,680 --> 00:10:44,160
It was okay the first time, but after 30,

216
00:10:44,620 --> 00:10:46,860
I told everyone, no more bus shelters.

217
00:10:47,300 --> 00:10:47,968
I

218
00:10:49,240 --> 00:10:53,568
like Context Live Surface because it's simple and has clear images.

219
00:10:53,940 --> 00:10:54,688
It's a book,

220
00:10:55,104 --> 00:10:56,120
bottle, box,

221
00:10:56,660 --> 00:10:59,160
or mobile device on a white or colored background.

222
00:10:59,460 --> 00:11:00,940
Nothing too specific.

223
00:11:01,540 --> 00:11:01,984
One

224
00:11:07,040 --> 00:11:07,820
more step here.

225
00:11:08,020 --> 00:11:09,840
With a book or printed item,

226
00:11:10,144 --> 00:11:13,440
the mockup has no side pages and other details.

227
00:11:13,840 --> 00:11:15,440
So I mash it up.

228
00:11:15,980 --> 00:11:16,480
I

229
00:11:17,040 --> 00:11:21,080
photograph the actual item for the edges and all of the details.

230
00:11:21,500 --> 00:11:22,208
In

231
00:11:22,760 --> 00:11:24,940
Photoshop, I combine the files.

232
00:11:25,140 --> 00:11:25,840
In the end,

233
00:11:26,160 --> 00:11:31,584
I have the page edges or spine or special shape of an object with perfect lighting,

234
00:11:31,872 --> 00:11:34,880
color, and type that I can read for the content.

235
00:11:35,380 --> 00:11:35,968
Now,

236
00:11:37,360 --> 00:11:38,980
let's talk about the website.

237
00:11:39,360 --> 00:11:40,940
This could be an entire course,

238
00:11:41,060 --> 00:11:42,780
but I'll cover the basics here.

239
00:11:43,120 --> 00:11:43,808
First,

240
00:11:45,568 --> 00:11:47,700
identify what you value in design.

241
00:11:48,020 --> 00:11:51,580
These are your attributes that define you as a brand.

242
00:11:51,860 --> 00:11:52,708
I know

243
00:11:53,344 --> 00:11:56,224
everyone on social media claims to be their own brand,

244
00:11:56,800 --> 00:11:57,980
but in this case,

245
00:11:58,112 --> 00:12:00,900
you need to differentiate yourself clearly.

246
00:12:01,300 --> 00:12:02,048
For example,

247
00:12:02,560 --> 00:12:03,860
I value clarity,

248
00:12:04,200 --> 00:12:06,540
honesty, and a straightforward approach.

249
00:12:07,280 --> 00:12:07,712
Of

250
00:12:09,020 --> 00:12:12,600
course, we're all individuals with contradictions and complexity,

251
00:12:13,000 --> 00:12:14,480
but you can't be here.

252
00:12:14,860 --> 00:12:19,280
The website portfolio needs to relay your point of view quickly.

253
00:12:19,620 --> 00:12:23,620
You want the viewer to remember you and your work and say,

254
00:12:23,740 --> 00:12:25,940
yeah, that Gerardo was about

255
00:12:26,660 --> 00:12:27,120
experimentation.

256
00:12:27,400 --> 00:12:28,352
Or, you

257
00:12:28,864 --> 00:12:30,580
know, I prefer that designer Isabel.

258
00:12:30,840 --> 00:12:33,888
She's a minimalist and that works better for our brand.

259
00:12:35,160 --> 00:12:37,080
The psychologist,

260
00:12:37,408 --> 00:12:42,272
Carl Jung, stated that we use symbols and archetypes to understand complex issues.

261
00:12:42,660 --> 00:12:43,960
In the simplest way,

262
00:12:44,120 --> 00:12:45,380
like the Sundance project,

263
00:12:45,700 --> 00:12:46,720
we understand archetypes.

264
00:12:47,900 --> 00:12:51,720
This might help determine your identity as a designer.

265
00:12:51,968 --> 00:12:53,400
Which one are you?

266
00:12:53,720 --> 00:12:54,464
As

267
00:12:55,560 --> 00:12:56,220
for the platform,

268
00:12:56,660 --> 00:12:57,700
there are multiple options.

269
00:12:57,980 --> 00:13:00,060
You can design and code your own site,

270
00:13:00,260 --> 00:13:02,960
use a templated system like Squarespace,

271
00:13:03,328 --> 00:13:04,480
a platform like Behance,

272
00:13:04,660 --> 00:13:07,140
or hire a developer to create the site.

273
00:13:07,620 --> 00:13:09,920
The choice should be made with this question.

274
00:13:10,140 --> 00:13:13,780
What will be the easiest to add to and maintain?

275
00:13:14,340 --> 00:13:18,640
The worst website is one that isn't up and running.

276
00:13:19,080 --> 00:13:19,648
Whatever

277
00:13:21,200 --> 00:13:23,700
platform or message you choose,

278
00:13:23,980 --> 00:13:26,380
the design should be easy to navigate

279
00:13:26,900 --> 00:13:29,040
well-crafted with room to grow.

280
00:13:29,820 --> 00:13:30,496
That's

281
00:13:31,660 --> 00:13:32,540
my design approach.

282
00:13:32,800 --> 00:13:35,960
Rather than making the viewer wonder about my philosophy,

283
00:13:36,360 --> 00:13:39,380
the website design matches the idea.

284
00:13:40,256 --> 00:13:40,672
Humans

285
00:13:43,180 --> 00:13:50,240
will always view a page in any format by looking at the image first and try to understand it.

286
00:13:50,420 --> 00:13:54,368
Then they'll look for a headline or some additional information.

287
00:13:54,940 --> 00:14:00,240
And finally, to any other text that might answer more questions.

288
00:14:00,780 --> 00:14:01,600
Give

289
00:14:03,240 --> 00:14:06,480
the viewer something big and colorful right away.

290
00:14:06,780 --> 00:14:11,720
Think of this as the glamour shot of a new Mercedes-Benz on a car brochure.

291
00:14:12,060 --> 00:14:13,840
You've gotten the viewer's attention.

292
00:14:14,340 --> 00:14:18,000
Most people decide to stay or leave a site within seconds.

293
00:14:18,304 --> 00:14:18,920
Good job.

294
00:14:19,488 --> 00:14:20,064
Now

295
00:14:20,800 --> 00:14:26,640
lead the viewer to your other projects using the amazing images and projects you've created.

296
00:14:26,792 --> 00:14:28,352
I won't

297
00:14:29,820 --> 00:14:34,600
go into depth on the website structure and search engine optimization issues,

298
00:14:34,800 --> 00:14:36,780
as they'll take more time than we have.

299
00:14:37,100 --> 00:14:44,460
But starting out, you might have four to five projects with a description of what the problem was and how you solved it.

300
00:14:44,820 --> 00:14:46,280
Mid-career and later,

301
00:14:46,440 --> 00:14:48,120
you'll have more work to add.

302
00:14:48,440 --> 00:14:51,008
Each should have several images,

303
00:14:51,456 --> 00:14:53,000
including some of the process.

304
00:14:53,500 --> 00:14:54,336
And

305
00:14:55,780 --> 00:14:56,640
for all the work,

306
00:14:56,736 --> 00:15:00,288
that maybe doesn't need an entire case study, add an archive

307
00:15:00,832 --> 00:15:03,280
that's an overview of all of your work.

308
00:15:03,440 --> 00:15:04,448
Now

309
00:15:05,220 --> 00:15:06,500
your site is up and running.

310
00:15:06,640 --> 00:15:08,740
You have work documented and archived,

311
00:15:08,800 --> 00:15:12,060
and you follow the same process at the end of every project.

312
00:15:12,360 --> 00:15:20,096
When I or another author sends an email asking for one of your projects to use on a book or in an online article,

313
00:15:20,420 --> 00:15:21,472
you're ready to go.

314
00:15:21,888 --> 00:15:22,688
Documentation

315
00:15:24,640 --> 00:15:26,540
and an online portfolio are like

316
00:15:26,660 --> 00:15:27,400
wheels on a car.

317
00:15:27,620 --> 00:15:28,672
We expect them.

318
00:15:29,152 --> 00:15:31,652
Make your presentation amazing.